import React, { Component } from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import './index.scss'
import ger from '../../assets/狗2.jpg'
import { UserOutlined, UnlockOutlined } from '@ant-design/icons';
import utils from '../../util/utils'
import axios from '../../requests/axios'

class login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      remember: true,
      loding:false
    }
    this.formRef = React.createRef()
  }

  componentDidMount() {
    this.takeNotes()
  }

  render() {
    return (
      <div className="elementArea" style={this.elementAreaStyle}>
        <div className="d_qy">
          <Form
            ref={this.formRef}
            name="basic"
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 18,
            }}
            initialValues={{
              username: this.state.username,
              password: this.state.password,
              remember: this.state.remember,
            }}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
          >
            <Form.Item
              label="账号"
              name="username"
              rules={[
                {
                  required: true,
                  message: '账号：admin',
                },
              ]}
            >
              <Input placeholder="admin" prefix={<UserOutlined />} />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{
                required: true,
                message: '密码：123',
              }, {
                validator: (rule, value, callback) => {
                  if (value === "123" || value === "") {
                    // callback()
                    return Promise.resolve()
                  } else {
                    // callback('你傻啊！')
                    return Promise.reject(new Error('你傻啊！'))
                  }
                }
              }
              ]}
            >
              <Input.Password placeholder="123" prefix={<UnlockOutlined />}/>
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Checkbox onChange={this.changeChck}>记住密码</Checkbox>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 10,
                span: 14,
              }}
            >
              <Button type="primary" htmlType="submit" loading={this.state.loding}>
                登陆
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
  elementAreaStyle = {
    background: `url(${ger}) center no-repeat`
  }

  //成功
  onFinish = (values) => {
    
    this.setState({
      username: values.username,
      password: values.password,
      loding:true
    })

    axios.post('/antd/login',{username:values.username,password:values.password}).then(res=>{
      if(res.result){
        this.setState({
          loding:false
        })
        utils.setStorage('session',"login",true)
        this.props.history.push('/首页')
      }
    })
    // setTimeout(()=>{
    //   this.setState({
    //     loding:false
    //   })
    // },2000)

    // let param = {
    //   username: this.state.username,
    //   password: this.state.password
    // }

    // if (this.state.remember) {
    //   utils.setCookie("denglu", param, 1)
    // } else {
    //   utils.delCookie("denglu")
    // }
    // console.log('Success:', values);
  };

  //失败
  onFinishFailed = (errorInfo) => {
    // console.log('Failed:', errorInfo);
  };

  //记住密码
  changeChck = (e) => {
    this.setState({
      remember: e.target.checked
    })
  };

  //判断是否记录密码
  takeNotes = () => {
    let ctn = utils.getCookie("denglu")
    if(ctn){
      this.setState({
        username: ctn.username,
        password: ctn.password
      })

      //重置form表单里的数据  setState不可以 3.x 用this.props.form.setFieldsValue
      this.formRef.current.setFieldsValue({
        username: ctn.username,
        password: ctn.password,
      })
    }
  }
}

export default login;